<template>
  <div class="pay-bill-list">
    <header>
      <div class="header-left">缴费项目</div>
      <div class="header-right">缴费公告</div>
    </header>

    <div class="list">
      <div class="item">
        <div class="item-name">缴费事项:</div>
        <div class="item-content">2019年度会费</div>
      </div>
      <div class="item">
        <div class="item-name">缴费状态:</div>
        <div class="item-state">未缴费</div>
        <div class="item-detail">
          <div class="detail-btn">查看详情</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'pay-bill-list'
}
</script>

<style lang="scss" scoped>
  .pay-bill-list{
    width:calc(100% - 20px);
    margin-left:10px;
  }
  header{
    display: flex;
    justify-content: space-between;
    .header-left{
      margin-bottom: 30px;
      font-size: 20px;
      font-weight: 600;
    }
    .header-right{
      color:gray;
    }
  }

  //列表
  .list{
    border-radius: 10px;
    padding:0 15px;
    border:1px solid #eee;
    height: 80px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    .item{
      width: 100%;
      display: flex;
      align-items: center;
      .item-name{
          margin-right: 10px;
        }
      .item-state{
        color:green;
      }
      .item-state-red{
        color:red;
      }
      .item-detail{
        flex:1;
        display: flex;
        flex-direction: row-reverse;
        .detail-btn{
          border-radius: 5px;
          padding:5px 10px;
          text-align: center;
          color:#fff;
          background-color: rgb(22, 155, 213);
        }
      }
    }
  }
</style>